<template>
	<view class="cart">
		<!-- #ifdef MP-WEIXIN -->
		<view v-show="api_host=='https://www.x-mii.com/app/index.php'">
			<ad unit-id="adunit-db4e7831d0e9876c"></ad>
		</view>
		<!-- #endif -->
		<view class="top">
			<view class="breadcrumb">
				<text class="item">{{shop_name}}</text>
			</view>
			<view class="edit" v-show="cart_list_length>0">
				<text v-show="!cartEdit" data-edit="1" @tap="edit_cart(1)">编辑</text>
				<text v-show="cartEdit" data-edit="0" @tap="edit_cart(0)">完成</text>
			</view>
		</view>

		<checkbox-group v-on:change="checkboxChange">

			<view class="product-list">

				<block v-for="item, index in cart_list">
					<view class="item">
						<view class="checkbox">
							<checkbox v-bind:id="'cart-'+ item.id" v-model="item.id" v-bind:checked="item.checked"></checkbox>
						</view>
						<view class="img">
							<image mode="widthFix" v-bind:src="item.image"></image>
						</view>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="product-option">{{item.goods_option}}</view>
							<view class="price-number-panel">
								<view class="price">
									<text>￥{{item.price}}</text>
									<text class="old">￥{{item.old_price}}</text>
								</view>
								<view v-show="!cartEdit" class="number-panel">
									<view class="jian" data-type="-" v-on:click="change_num(item,'-')">-</view>
									<input class="number" v-model="item.goods_num" type="text" />
									<view class="jia" data-type="+" v-on:click="change_num(item,'+')">+</view>
								</view>
								<view v-show="cartEdit" v-on:click="cart_remove(item)" class="remove">移除</view>
							</view>
						</view>
					</view>
				</block>
			</view>

			<view class="nothing" v-show="cart_list_length==0">
				<image mode="widthFix" src="/static/image/skin/cart.png"></image>
				<view class="desc">您的购物车内没有商品</view>
				<navigator class="backlink" url="/sm_shop/pages/home/home" open-type="switchTab">返回首页</navigator>
			</view>
		</checkbox-group>
		<view class="jiesuan" v-show="cart_list_length">

			<view class="all-check">
				<checkbox-group v-on:change="allChange">
					<label for="">
						<checkbox id="cart-all" value="check-all" v-bind:checked="all_checked"></checkbox>
						<text>全选</text>
					</label>

				</checkbox-group>

			</view>
			<view @tap="checkout" v-show="!cartEdit" class="jiesuan-btn">
				结算
			</view>

			<view class="total">
				<view class="heji">
					<text class="title">合计:</text><text class="price">￥{{goods_total}}</text></view>
				<view class="shipping">不含运费</view>
			</view>

		</view>
		<trademark></trademark>
	</view>
</template>

<script>
	import trademark from '../../common/trademark';
	const appInstance = getApp();
	export default {
		data() {
			return {
				api_host:appInstance.globalData.api_host,
				shop_name: '',
				cartEdit: 0,
				cart_list: [],

				goods_total: 0,
				order_total: 0,
				all_checked: 1
			}
		},
		onShow: function() {
			this.get_cart_list();
		},
		onLoad: function(options) {
			appInstance.globalData.checkUserStatus();
			// appInstance.util.footer(this);
			// this.setData({
			// 	shop_name: appInstance.globalData.shop_name;
			// });
			this.shop_name = appInstance.globalData.shop_name;

			//todo 获取购物车商品列表
			this.get_cart_list();

			//todo 计算购物车总价值
			// this.cart_caculate();
		},

		computed: {
			cart_list_length:function(){
				
				return this.cart_list.length;
			}
		},
		methods: {

			get_cart_list: function(resolve) {

				var url = '&r=cart.index';

				var t = this;

				appInstance.globalData.request(url, {}, 'GET', function(res) {

					if (Array.isArray(res.data.list)) {
						res.data.list.forEach(function(item) {

							item.checked = 1;

						});

						// t.setData({

						// 	cart_list: res.data.list

						// }, function() {
						// 	t.cart_caculate();
						// });
						t.cart_list = res.data.list;
						t.cart_caculate();
					}
					if (typeof resolve == 'function') {
						resolve(res.data);
					}

				});

			},


			cart_caculate: function() {

				var t = this;
				var cart_ids = '';

				console.log(this.cart_list);
				this.cart_list.forEach(function(item) {

					if (item.checked) {
						cart_ids += item.id + ',';
					}


				});

				cart_ids = cart_ids.replace(/\,$/, '');
				var url = '&r=cart.calculate';

				var data = {
					cart_ids: cart_ids
				};
				appInstance.globalData.request(url, data, 'GET', res => {

					console.log(res);

					// t.setData({
					// 	goods_total: res.data.goods_total,
					// 	order_total: res.data.order_total
					// });
					t.goods_total = res.data.goods_total;
					t.order_total = res.data.order_total;

				});

			},

			// 修改商品数量
			change_num: function(product, type) {

				var t = this;


				// var dataset = event.target.dataset;
				// var product = dataset.product;

				if (type == '-') {
					product.goods_num--;
				} else {
					product.goods_num++;
				}
				product.goods_num = product.goods_num <= 0 ? 1 : product.goods_num;
				this.cart_list.forEach(function(item, index) {

					if (item.id == product.id) {
						t.cart_list[index].goods_num = product.goods_num;

					}
				});

				// todo 刷新数据
				// this.setData({
				// 	cart_list: this.data.cart_list
				// });
				// todo 发送修改请求

				var url = '&r=cart.change';

				var data = {
					cart_id: product.id,
					number: product.goods_num
				};

				appInstance.globalData.request(url, data, 'GET', res => {

					t.cart_caculate();

				});

			},

			edit_cart: function(edit) {

				// console.log(e);

				// this.setData({
				// 	cartEdit: parseInt(e.target.dataset.edit)
				// });
				this.cartEdit = parseInt(edit);
			},

			cart_remove: function(item) {
				// console.log(e);

				var t = this;
				var url = '&r=cart.remove';

				// var item = e.target.dataset.item;
				var data = {
					cart_id: item.id
				};


				appInstance.globalData.request(url, data, 'get', res => {
					t.get_cart_list();
				});


			},


			checkboxChange: function(e) {

				var t = this;
				var checkedArr = e.detail.value;
				var all_checked = 1;
				this.cart_list.forEach(function(item, index) {

					if (checkedArr.indexOf(item.id) > -1) {
						item.checked = 1;
					} else {
						item.checked = 0;
						all_checked = 0;
					}

					// item.checked = allChecked;

				});

				// this.setData({

				// 	cart_list: this.data.cart_list,
				// 	all_checked: all_checked
				// }, function() {
				// 	t.cart_caculate();
				// });
				this.all_checked = all_checked;
				t.cart_caculate();
			},
			allChange: function(e) {

				var t = this;

				var allChecked = 0;
				if (e.detail.value.indexOf('check-all') > -1) {
					allChecked = 1;
				}

				this.cart_list.forEach(function(item, index) {
					item.checked = allChecked;
				});

				// this.setData({
				// 	cart_list: this.data.cart_list
				// }, function() {

				// 	t.cart_caculate();
				// });
				t.cart_caculate();

			},


			// 进入下单页面
			checkout: function() {

				var cartids = [];
				
				this.cart_list.forEach(function(item) {
					if (item.checked) {
						cartids.push(item.id);
					}
				});

				if(!cartids.length){
					uni.showToast({
						title: '请选中要购买的商品',
						icon: 'none',
						duration: 800
					});
					return;
				}
				uni.navigateTo({
					url: '/sm_shop/pages/checkout/checkout?cartids=' + cartids.join(',')
				});

			}

		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			var p = new Promise(this.get_cart_list);
			p.then(function(result) {
				uni.stopPullDownRefresh();
			});
		},
		components:{
			trademark
		},
	}
</script>

<style lang="less">
	@import './cart.less';
</style>
